<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三个参数</title>
    <style>
        #father {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            background-color: cornflowerblue;
        }

        #son {
            width: 100px;
            height: 100px;
            background-color: dodgerblue;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son"></div>
    </div>

    <script>

        var son = document.getElementById('son');
        var father = document.getElementById('father');
        var arr = [son, father, document.body, document.documentElement, document, window];
        for (var i = 0; i < arr.length; i++) {
            // arr[i].onclick = () => {
            //     console.log(this);
            // }
            arr[i].onclick = function() {       //冒泡  ->  从子级到父级的过程  ->  冒泡的顺序
                console.log(this);
            }



            arr[i].addEventListener("click",function(){     //第三个参数  ->  false  ->  不使用捕获  ->  使用冒泡 自下向上
                console.log(this);
            },false)



            arr[i].addEventListener("click",function(){     //第三个参数  ->  true  ->  捕获  ->  自上而下
                console.log(this);
            })
        }



    </script>
</body>

</html>